<template>
  <!-- 过滤组件 -->
  <view class="content">
    <view class="wr-class filter-wrap">
      <view class="filter-left-content">
        <view class="filter-item" :class="overall === 0 ? 'filter-active-item' : ''" @click="onOverallAction">
          销量
        </view>
        <view class="filter-item" :class="overall === 1 ? 'filter-active-item' : ''" @click="handlePriseSort">
          <text>价格</text>
          <view class="filter-price">
            <u-icon name="arrow-up-fill" size="18rpx" :color="sorts === 'asc' ? '#32B499' : '#D9D9D9'" />
            <u-icon name="arrow-down-fill" size="18rpx" :color="sorts === 'desc' ? '#32B499' : '#D9D9D9'" />
          </view>
        </view>
      </view>
    </view>
    <!-- 筛选弹框 -->
    <slot name="filterPopup" />
  </view>
</template>
<script>
export default {
  props: {
    overall: {
      type: Number,
      default: 0,
    },
    layout: {
      type: Number,
      default: 1,
    },
    sorts: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#32B499',
    },
  },
  data() {
    return {
    }
  },
  methods: {
    onChangeShowAction() {
      const { layout } = this;
      const nextLayout = layout === 1 ? 0 : 1;
      this.$emit('change', { ...this.props, layout: nextLayout });
    },

    handlePriseSort() {
      const { sorts } = this;
      this.$emit('change', {
        ...this.props,
        overall: 1,
        sorts: sorts === 'desc' ? 'asc' : 'desc',
      });
    },

    open() {
      this.$emit('showFilterPopup', {
        show: true,
      });
    },

    onOverallAction() {
      const { overall } = this;
      const nextOverall = overall === 0 ? 1 : 0;
      const nextData = {
        sorts: '',
        prices: [],
      };
      this.$emit('change', {
        ...this.props,
        ...nextData,
        overall: nextOverall,
      });
    },
  },
}
</script>
<style scoped>
.filter-wrap {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #fff;
}

.filter-right-content {
  height: 100%;
  flex-basis: 100rpx;
  text-align: center;
  line-height: 88rpx;
}

.filter-left-content {
  height: 100%;
  display: flex;
  flex-grow: 2;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 19rpx 24rpx;
  box-sizing: border-box;
}

.filter-left-content .filter-item {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  line-height: 36rpx;
  font-weight: 400;
  color: #666666;
  background-color: #F6F6F6;
  border-radius: 24rpx;
}

.filter-left-content .filter-item:last-child {
  margin-left: 24rpx;
}

.filter-left-content .filter-item .filter-price {
  display: flex;
  flex-direction: column;
  margin-left: 6rpx;
  justify-content: space-between;
}

.filter-left-content .filter-item .wr-filter {
  margin-left: 8rpx;
}

.filter-left-content .filter-active-item {
  color: #32B499;
  border: 2rpx solid #32B499;
  border-radius: 24rpx;
  background-color: #fff;
}
</style>